<template>
  <div
    id="main"
    class="echarts"
    :style="{ width: '470px', height: '400px' }"
  ></div>
</template>
<script>
// import.* as echarts from echarts/lib/echarts.js
// import * as echarts from 'echarts'

// import 'v-charts-v2/lib/line'
import * as echarts from "echarts/lib/echarts.js";
export default {
  props: {
    echartDataSku: {
      type: Object,
      default() {
        return {
          columns: [],
          rows: [],
        };
      },
    },
  },

  data() {
    // :colors="colors"
    // this.colors = ['#03C8D5', '#40A9F5'];
    //
    // this.chartSettings = {
    //     yAxisType: ['0.[00]a', '0.[00]%'],
    //     axisSite: {
    //         right: []
    //         // '下单率'
    //     },
    //     yAxisName: ['数值轴', '比率轴']
    // },

    return {
      radar: [
        {
          name: "A Software",
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
          foceData: [4200, 3000, 20000, 35000, 50000, 18000],
        },
        {
          name: "A Phone",
          indicator: [
            { name: "Sales1", max: 6500 },
            { name: "Administration1", max: 16000 },
            { name: "Information Technology1", max: 30000 },
            { name: "Customer Support1", max: 38000 },
            { name: "Development1", max: 52000 },
            { name: "Marketing1", max: 25000 },
          ],
          foceData: [1200, 2000, 10000, 25000, 30000, 12000],
        },
      ],
    };
  },
  // computed: {
  //     axisOption() {
  //         return this.chartData
  //     }
  // },
  watch: {
    // echartDataSku: {
    //   handler: function (newnew, oldold) {
    //     // console.log(JSON.stringify(newnew));
    //     newnew.columns.forEach((item) => {
    //       if (item.includes("率")) {
    //         this.chartSettings.axisSite.right.push(item);
    //         if (item.includes("连带率")) {
    //           this.chartSettings.axisSite.right = [];
    //           this.axisOption = newnew;
    //           // this.axisOption.columns = this.chartData.columns
    //         }
    //       } else {
    //         this.chartSettings.axisSite.right = [];
    //         this.axisOption = newnew;
    //         // this.axisOption.columns = this.chartData.columns
    //       }
    //     });
    //     // this.axisOption.rows = this.chartData.rows
    //     // this.initChart()
    //     // this.axisOption = newnew;
    //     // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
    //     // console.log(new Date());
    //     this.$nextTick(() => {
    //       // this.$refs.table.doLayout();
    //       this.$refs.table.echarts.resize();
    //       // console.log('渲染完成时间', new Date());
    //     });
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  mounted: function () {
    var self = this;
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    myChart.showLoading();
    setTimeout(function () {
      myChart.hideLoading();
      var option = {
        title: {
          text: "Basic Radar Chart",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: "center",
          data: ["A Software", "A Phone"],
        },
        radar: [
          // shape: 'circle',
          {
            indicator: self.radar[0].indicator,
            center: ["35%", "50%"],
            axisName: {
              color: "#333333",
            },
          },
          // {
          //   indicator: self.radar[1].indicator,
          //   center: ["80%", "50%"],
          //   axisName: {
          //     color: "#333333",
          //   },
          // },
        ],
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            areaStyle: {},
            data: [
              {
                value: self.radar[0].foceData,
                name: self.radar[0].name,
              },
            ],
          },
          // {
          //   type: "radar",
          //   radarIndex: 1,
          //   tooltip: {
          //     trigger: "item",
          //   },
          //   areaStyle: {},
          //   data: [
          //     {
          //       value: self.radar[1].foceData,
          //       name: self.radar[1].name,
          //     },
          //   ],
          // },
        ],
      };
      option && myChart.setOption(option);
    }, 2000);
  },
  methods: {
    // initChart() {
    //   this.axisOption = this.echartDataSku;
    // },
  },
};
</script>
